import { useState, useRef, useEffect } from "react";
import { Button, Tabs } from "@arco-design/web-react";
import { IconDoubleRight } from "@arco-design/web-react/icon";
import { LiveProvider, LiveEditor } from "react-live";

import styles from "./index.module.less";
const TabPane = Tabs.TabPane;
const ChatPreview = ({
  currentArtifact,
  generateEndStatus,
  setPreviewStatus,
}: {
  currentArtifact: any;
  generateEndStatus: boolean;
  setPreviewStatus: (status: boolean) => void;
}) => {
  const [type, setType] = useState<"preview" | "code">("code");

  const [previewCode, setPreviewCode] = useState<string>(
    currentArtifact?.content || ""
  );

  const [iframeReady, setIframeReady] = useState<boolean>(false);
  const iframeRef = useRef<HTMLIFrameElement>(null);
  const handleCodeChange = (code: string) => {
    setPreviewCode(code);
  };
  const handlerTypeChange = (value: "preview" | "code") => {
    setType(value);
    sendCodeToIframe("");
  };

  // 向iframe发送代码
  const sendCodeToIframe = (code: string) => {
    console.log(previewCode, "previewCodepreviewCode");
    iframeRef.current?.contentWindow?.postMessage(
      {
        type: "UPDATE_COMPONENT",
        code: code || previewCode,
      },
      "*"
    );
  };

  useEffect(() => {
    setTimeout(() => {
      setIframeReady(true);
    }, 5000);
  }, []);

  //   useEffect(() => {
  //     if (currentArtifact) {
  //       setPreviewCode(currentArtifact?.content || "");
  //     }
  //   }, [currentArtifact]);

  // 监听代码生成完毕
  useEffect(() => {
    if (generateEndStatus) {
      sendCodeToIframe(currentArtifact?.content);
    }
  }, [generateEndStatus]);

  return (
    <div className={styles.chatPreviewWarp}>
      <div className="codePreview_head">
        <div className="head_box">
          <Button
            onClick={() => {
              setPreviewStatus(false);
              setType("code");
            }}
            className="flex justify-center items-center"
            icon={<IconDoubleRight style={{ fontSize: "22px" }} />}
          ></Button>
          <div className="generatePageName">{currentArtifact?.title || ""}</div>
        </div>

        <div className="head_tools">
          <Tabs
            type="card"
            activeTab={type}
            onChange={handlerTypeChange as (key: string) => void}
          >
            <TabPane
              key="preview"
              title="preview"
              disabled={!iframeReady || !generateEndStatus}
            ></TabPane>
            <TabPane key="code" title="code"></TabPane>
          </Tabs>
        </div>
      </div>
      <div className="codePreview_content">
        <iframe
          style={{
            visibility: type === "preview" ? "visible" : "hidden",
            height: type === "preview" ? "100%" : "0",
          }}
          className="w-full h-full"
          ref={iframeRef}
          src="http://45.207.200.100:3000/"
          loading="lazy"
        ></iframe>

        <div
          style={{
            visibility: type === "code" ? "visible" : "hidden",
            height: type === "code" ? "100%" : "0",
          }}
        >
          <LiveProvider code={currentArtifact?.content}>
            <div className="h-full w-full overflow-aoto">
              <LiveEditor onChange={handleCodeChange} className="h-full" />
            </div>
          </LiveProvider>
        </div>
      </div>
    </div>
  );
};

export default ChatPreview;
